<template>
  <a-row type="flex" justify="space-between" class="boxs">
    <a-col :span="18">
      <div class="hot-t">热门游戏</div>
      <a-row type="flex" class="hot-box">
        <a-col
          :span="6"
          v-for="(item, index) in list"
          :key="index"
          class="hot-box-item"
          @click="onJump(item)"
        >
          <img :src="item.icon" alt srcset />
          <div class="hot-box-item-n">{{item.name}}</div>
        </a-col>
      </a-row>
    </a-col>
    <a-col :span="6" class="notice">
      <a-row class="notice-t" type="flex" justify="space-between">
        <a-col :span="4" class="notice-t-l">公告</a-col>
        <a-col :span="4" class="cp" @click="more">更多</a-col>
      </a-row>
      <div class="notice-p" style="padding-top:10px;">
        <a-row type="flex" justify="space-between" v-for="(item,index) in notice" :key="index">
          <a-col :span="16" class="notice-box-l cp" @click="more">
            <span class="point"></span>
            {{item.title}}
          </a-col>
          <a-col :span="7" class="notice-box-r">{{item.create_time}}</a-col>
        </a-row>
      </div>
    </a-col>
  </a-row>
</template>

<script>
import { GET_LIST, INDEX_NOTICE } from "./server";
export default {
  data() {
    return {
      list: [],
      notice: []
    };
  },
  created() {
    this.getList();
    this.getNotice();
  },
  methods: {
    onJump(item) {
      this.$router.push({
        name: "game-list",
        params: {
          list: item.list_id
        }
      });
    },
    more() {
      this.$router.push({
        name: "notice"
      });
    },
    getList() {
      GET_LIST().then(res => {
        if (!res) return;
        this.list = res.data.hot;
      });
    },
    getNotice() {
      INDEX_NOTICE({ type: "index" }).then(res => {
        if (!res) return;
        this.notice = res.data;
      });
    }
  }
};
</script>

<style lang='less' scoped>
.boxs {
  margin: 20px 0;

  .hot-t {
    height: 120px;
    line-height: 120px;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    background: #f6f6f6;
  }
  .hot-box {
    border-left: 1px solid #f6f6f6;
    .hot-box-item {
      height: 160px;
      line-height: 160px;
      text-align: center;
      border-right: 1px solid #f6f6f6;
      border-bottom: 1px solid #f6f6f6;
      cursor: pointer;
      position: relative;
      img {
        width: 110px;
        height: 110px;
      }
      &:hover .hot-box-item-n {
        display: block;
      }
      .hot-box-item-n {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        color: #fff;
        background: #0084ff;
        display: none;
      }
    }
  }

  .notice {
    padding-left: 16px;

    .notice-t {
      line-height: 42px;

      .notice-t-l {
        width: 58px;
        height: 42px;
        background: #f6f6f6;
        position: relative;
        font-size: 18px;
        text-align: center;
        color: #0084ff;
        &::after {
          content: "";
          display: block;
          width: 0;
          height: 0;
          border-width: 21px 5px;
          border-color: transparent transparent #f6f6f6 #f6f6f6;
          border-style: solid;
          position: absolute;
          right: -10px;
          top: 0;
        }
      }
    }
    .notice-p {
      background: #f6f6f6;
      height: 220px;
      border-bottom: 2px solid #f5f5f5;
      .notice-box-l {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 30px;
        line-height: 30px;
        &:hover {
          color: #0084ff;
        }
        .point {
          background: #cdcdcd;
          width: 4px;
          height: 4px;
          display: inline-block;
          vertical-align: middle;
          margin-left: 8px;
          margin-right: 8px;
          margin-top: -8px;
        }
      }

      .notice-box-r {
        height: 30px;
        line-height: 30px;
        color: #bcc2d3;
      }
    }

    .validation-box {
      height: 124px;
      text-align: center;
      padding: 0 10px;
      line-height: 62px;
      .validation-box-t {
        font-size: 18px;
      }
    }
  }
}
</style>
